<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="/main.js" defer></script>
    <title>Linux图片格式转换及添加文本水印-V1.0</title>

    <style>

    </style>
</head>

<body>
    <div class="container">
        <!-- 左侧菜单 -->
        <nav class="sidebar">
            <div class="app-title">
                <h1>Linux图片格式转换及添加文本水印</h1>
                <p>Version 1.0</p>
            </div>

            <ul class="menu">
                <li class="menu-item active" data-page="image-to-pdf">
                    <a href="#">
                        <span>图片转PDF文件</span>
                    </a>
                </li>
                <li class="menu-item" data-page="image-to-image">
                    <a href="#">
                        <span>图片格式转换</span>
                    </a>
                </li>
                <li class="menu-item" data-page="text-watermark">
                    <a href="#">
                        <span>图片添加文本水印</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 右侧内容区域 -->
        <main class="content">
            <!-- 图片转PDF文件页面 -->
            <div id="image-to-pdf" class="page active">
                <h2>图片转PDF文件</h2>
                <div class="page-content">
                    <p>可以把图片（格式支持webp、png、jpg、jpeg、tiff）批量转换为PDF文件，多个图片转换时可以选择是否合并为一个PDF文件。
                    </p>

                    <div class="section">
                        <div>
                            <label class="option-label" for="pdf-merge">图片转PDF是否合并?</label>
                        </div>
                        <div class="radio-group">
                            <label><input id="pdf-merge-no" type="radio" name="pdf-merge-option" checked> 否</label>
                            <label><input id="pdf-merge-yes" type="radio" name="pdf-merge-option"> 是</label>
                        </div>
                    </div>

                    <form class="row" id="greet-form-image-to-pdf">
                        <button type="submit">执行</button>
                    </form>
                </div>
            </div>

            <!-- 图片格式转换页面 -->
            <div id="image-to-image" class="page">
                <h2>图片格式转换</h2>
                <div class="page-content">
                    <p>可以把图片（格式支持webp、png、jpg、jpeg、tiff）批量进行格式转换。</p>

                    <div class="section">
                        <label class="option-label">转换后图片格式：</label>
                        <select id="mySelect1">
                            <option value="webp">webp</option>
                            <option value="png">png</option>
                            <option value="jpg">jpg</option>
                            <option value="jpeg">jpeg</option>
                            <option value="tiff">tiff</option>
                        </select>
                    </div>

                    <form class="row" id="greet-form-image-convert">
                        <button type="submit">执行</button>
                    </form>
                </div>
            </div>

            <!-- 图片添加文本水印页面 -->
            <div id="text-watermark" class="page">
                <h2>图片添加文本水印</h2>
                <div class="page-content">
                    <p>可以把图片（格式支持webp、png、jpg、jpeg、tiff）批量进行格式转换，同时可以为图片批量添加文本水印。</p>

                    <div class="section">
                        <label class="option-label">转换后图片格式：</label>
                        <select id="mySelect2">
                            <option value="webp">webp</option>
                            <option value="png">png</option>
                            <option value="jpg">jpg</option>
                            <option value="jpeg">jpeg</option>
                            <option value="tiff">tiff</option>
                        </select>

                        <label class="option-label">文本水印内容：</label>
                        <input id="watermark-text" type="text" value="">
                        <label class="option-label">文本水印位置：</label>

                        <div class="radio-group">
                            <label><input id="watermark-position-1" type="radio" name="watermark-position" checked>
                                左上角</label>
                            <label><input id="watermark-position-2" type="radio" name="watermark-position"> 右上角</label>
                            <label><input id="watermark-position-3" type="radio" name="watermark-position"> 左下角</label>
                            <label><input id="watermark-position-4" type="radio" name="watermark-position"> 右下角</label>
                            <label><input id="watermark-position-5" type="radio" name="watermark-position"> 正中心</label>
                        </div>
                    </div>

                    <form class="row" id="greet-form-image-add-watermark">
                        <button type="submit">执行</button>
                    </form>
                </div>
            </div>

            <div class="footer">
                <a href="https://datutu.blog.csdn.net" target="_blank">https://datutu.blog.csdn.net</a>
            </div>
        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取所有菜单项
            const menuItems = document.querySelectorAll('.menu-item');

            // 获取所有页面
            const pages = document.querySelectorAll('.page');

            // 为每个菜单项添加点击事件
            menuItems.forEach(item => {
                item.addEventListener('click', function () {
                    // 移除所有菜单项的active类
                    menuItems.forEach(i => i.classList.remove('active'));

                    // 添加active类到当前点击的菜单项
                    this.classList.add('active');

                    // 获取目标页面ID
                    const targetPage = this.getAttribute('data-page');

                    // 隐藏所有页面
                    pages.forEach(page => {
                        page.classList.remove('active');
                    });

                    // 显示目标页面
                    document.getElementById(targetPage).classList.add('active');
                });
            });

            // 模拟加载效果
            setTimeout(() => {
                document.querySelector('.container').style.opacity = 1;
                document.querySelector('.container').style.transform = 'translateY(0)';
            }, 100);
        });
    </script>
</body>

</html>